<template>
  <div class="home">
    <myNav></myNav>
    <div class="left">
      <div class="top">
        <div class="logo"></div>
        <div>
          <site-title :fontSize="4"></site-title>
        </div>
        <div class="text">Jekyll、Hugo、Hexo 是简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown 以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll、Hugo、Hexo 也可以运行在 Gitee Pages 上，也就是说，你可以使用 Gitee 的服务来搭建你的仓库页面、博客或者网站，而且是完全免费的。</div>
      </div>
      <myFooter :paddingRight="0"></myFooter>
    </div>
    <div class="right">
      <div class="carousel-box" ref="carouselBox">
        <carousel :carouselHeight="carouselHeight" :carouselList="carouselList"></carousel>
      </div>
    </div>
    
  </div>
</template>

<script>
import carousel from "@components/carousel";
import myFooter from "@components/footer";
import siteTitle from "@components/siteTitle";
import myNav from "@components/nav";
export default {
  name: 'Home',
  components: {
    carousel,
    myFooter,
    siteTitle,
    myNav
  },
  mounted(){
    this.carouselHeight = this.$refs.carouselBox.clientHeight;

  },
  data(){
    return {
      carouselHeight: 0,
      carouselList: [
        {url: require('@/assets/images/bg1.png')},
        {url: require('@/assets/images/login_bg.jpg')},
        {url: require('@/assets/images/login.jpg')},
      ],
    }
  },
  methods:{

  },
}
</script>
<style lang="less" scoped>
@import url("../assets/css/global.less");
  .home {
    height: 100%;
    .left {
      width: 60%;
      float: left;      
      padding-right: 8vw;
      .top {
        height: calc(100vh - 6rem);
        padding-right: 15vw;
        padding-left: 5vw;
        .logo {
          height: 30vh;
        }

        .text {
          margin-top: 12vh;
          text-align: left;
          line-height: 2rem;
          color: @color-text;
        }
      }
    }
    .right {
      display: inline-block;
      width: 40%;
      height: 100%;
      padding-top:2rem;
      padding-right: 5vw;
      position: relative;
      .carousel-box {
        width: 90%;
        height: 100%;
      }
    }
  }
</style>
